<script lang="tsx">
/**
 * 启航站（首页）
 */
export default {
  name:"departure-station"
}
</script>

<script setup lang="tsx">
import {onMounted, Ref, ref} from "vue";
import {processRequest} from "anqin-framework";
import {GlobalConfigEnum} from "@/components/menu-form/index.ts";

/**
 * 挂载时运行
 */
onMounted(() => {
  getList()
  getRefreshList()
  getMessageList()
})

/**
 * 获取数据
 */
const dataList: any = ref({
  blogLogo: ""
})
const getList = async ()=>{
  const result = await processRequest.get("/api/BlogGlobalConfig",{
    pageSize:9999
  })
  dataList.value={
    blogLogo: result.dataList.find((item: any) => item.status === GlobalConfigEnum['网站Logo'])?.content
  }
}

/**
 * 获取项目案例数据(入站必刷)
 */
const refreshList: any = ref([])
const getRefreshList = async () =>{
  const result = await processRequest.get("/api/BlogProjectCase",{
    pageSize:9999
  })
  refreshList.value= result.dataList
}

/**
 * 获取博客文章数据(最近文章)
 */
const messageList: any = ref([])
const getMessageList = async ()=>{
  const result = await processRequest.get("/api/BlogText",{
    pageSize:9999
  })
  messageList.value=result.dataList
}


</script>

<template>
  <div class="departure-station">
    <div class="head">
      <div class="head-fpic">
        <img class="head-pic" :src="dataList?.blogLogo"  alt="sss">
      </div>
      <div class="head-fcontent">
        <div class="head-content">
          <div>随便写写笔记，记录编程脚印。</div>
          <div>100分比60分更重要</div>
        </div>
      </div>
      <div class="head-icon">
        <div><a href="#">vx</a></div>
        <div><a href="#">bb</a></div>
        <div><a href="#">qq</a></div>
        <div><a href="#">gh</a></div>
        <div><a href="#">em</a></div>
      </div>
    </div>
    <div class="station-refresh">
      <div class="refresh-header">
        <img class="header-img" src="/image/icon/tv-solid.svg" alt="tv"/>
        <div class="header-title">入站必刷</div>
      </div>
      <div class="refresh-container">
        <div class="list" v-if="refreshList.length > 0">
          <div class="item"  v-for="(item,index) in refreshList.slice(0,3)" :key="index">
            <img class="item-img" :src="item.image" alt="">
            <div class="item-message">
              {{item.name}}
            </div>
          </div>
        </div>
        <div class="container-empty" v-else>
          暂无内容
        </div>
      </div>
    </div>
    <div class="station-text">
      <div class="list"  v-if="messageList.length > 0">
        <div class="item">
          <img class="item-img" src="/image/icon/tv-solid.svg" alt="tv"/>
          <div class="item-title">最近文章</div>
          <div class="item-container" v-for="(item,index) in messageList" :key="index">
            <div class="item-container-left">
                <img class="left-img" src="../../../../../public/image/head.jpg" alt="sss">
            </div>
            <div class="item-container-user">
              <div class="user-time">发布于 {{item.createTime}}</div>
              <div class="user-name">{{item.userName}}</div>
              <div  class="user-list">
                <div class="list-hot">{{ item.readCount }} 热度</div>
                <img class="list-dialog-img" src="/image/icon/tv-solid.svg" alt="tv"/>
                <div class="list-name">{{item.userName}}</div>
                <img class="list-image" src="../../../../../public/image/head.jpg" alt="tv"/>
              </div>
              <div class="user-introduce">
                {{item.content}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</template>

<style scoped lang="scss" src="./index.scss">

</style>